<template>
    <div class="login-container">
        <!-- 顶部工具栏 -->
        <div class="top-bar">
            <el-switch v-model="isDark" inline-prompt active-icon="Moon" inactive-icon="Sunny" @change="toggleTheme" />
        </div>
        <!-- 登录表单 -->
        <el-card class="login-card">
            <div class="text-center relative">
                <h2>用户登录</h2>
            </div>

            <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <div class="input-wrapper">
                        <i-ep-user class="mx-2" />
                        <el-input
                            ref="username"
                            v-model="loginData.username"
                            :placeholder="$t('login.username')"
                            name="username"
                            size="large"
                            class="h-[48px]"
                        />
                    </div>
                </el-form-item>

                <!-- 密码 -->
                <el-tooltip :visible="isCapslock" :content="$t('login.capsLock')" placement="right">
                    <el-form-item prop="password">
                        <div class="input-wrapper">
                            <i-ep-lock class="mx-2" />
                            <el-input
                                v-model="loginData.password"
                                :placeholder="$t('login.password')"
                                type="password"
                                name="password"
                                size="large"
                                class="h-[48px] pr-2"
                                show-password
                                @keyup="checkCapslock"
                                @keyup.enter="handleLoginSubmit"
                            />
                        </div>
                    </el-form-item>
                </el-tooltip>

                <!-- 验证码 -->
                <el-form-item prop="captchaCode">
                    <div class="input-wrapper">
                        <svg-icon icon-class="captcha" class="mx-2" />
                        <el-input
                            v-model="loginData.captchaCode"
                            auto-complete="off"
                            size="large"
                            class="flex-1"
                            :placeholder="$t('login.captchaCode')"
                            @keyup.enter="handleLoginSubmit"
                        />
                        <div
                            v-html="captchaBase64"
                            class="captcha-image"
                            @click="getCaptcha"
                            v-if="captchaBase64 !== false"
                        ></div>
                        <div class="captcha-image error" @click="getCaptcha" v-else>获取失败</div>
                    </div>
                </el-form-item>

                <!-- 登录按钮 -->
                <el-button
                    :loading="loading"
                    type="primary"
                    size="large"
                    class="w-full"
                    @click.prevent="handleLoginSubmit"
                >
                    {{ $t('login.login') }}
                </el-button>

                <!-- 账号密码提示 -->
                <div class="mt-10 text-sm">
                    <span>{{ $t('login.username') }}: admin</span>
                    <span class="ml-4">{{ $t('login.password') }}: 123456</span>
                </div>
            </el-form>
        </el-card>

        <!-- ICP备案 -->
        <div v-show="icpVisible" class="icp-info">
            <p>Copyright © 2021 - 2024 wei.zone All Rights Reserved.</p>
        </div>
    </div>
</template>

<script setup lang="ts">
// 外部库和依赖
import { LocationQuery, useRoute } from 'vue-router'

// 内部依赖
import { useSettingsStore, useUserStore } from '@/store'
import AuthAPI, { LoginData } from '@/api/auth'
import router from '@/router'
import { ThemeEnum } from '@/enums/ThemeEnum'

// 类型定义
import type { FormInstance } from 'element-plus'

// 导入 login.scss 文件
import '@/styles/login.scss'

// 使用导入的依赖和库
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const route = useRoute()
// 窗口高度
const { height } = useWindowSize()
// 国际化 Internationalization
const { t } = useI18n()

// 是否暗黑模式
const isDark = ref(settingsStore.theme === ThemeEnum.DARK)
// 是否显示 ICP 备案信息
const icpVisible = ref(true)
// 按钮 loading 状态
const loading = ref(false)
// 是否大写锁定
const isCapslock = ref(false)
// 验证码图片Base64字符串
const captchaBase64 = ref()
// 登录表单ref
const loginFormRef = ref<FormInstance>()

const loginData = ref<LoginData>({
    username: 'admin',
    password: '123456'
} as LoginData)

const loginRules = computed(() => {
    return {
        username: [
            {
                required: true,
                trigger: 'blur',
                message: t('login.message.username.required')
            }
        ],
        password: [
            {
                required: true,
                trigger: 'blur',
                message: t('login.message.password.required')
            },
            {
                min: 6,
                message: t('login.message.password.min'),
                trigger: 'blur'
            }
        ],
        captchaCode: [
            {
                required: false,
                trigger: 'blur',
                message: t('login.message.captchaCode.required')
            }
        ]
    }
})

/** 获取验证码 */
function getCaptcha() {
    AuthAPI.getCaptcha().then(
        data => {
            loginData.value.captchaKey = data.captchaKey
            captchaBase64.value = data.captchaBase64
        },
        () => {
            captchaBase64.value = false
        }
    )
}

/** 登录表单提交 */
function handleLoginSubmit() {
    loginFormRef.value?.validate((valid: boolean) => {
        if (valid) {
            loading.value = true
            userStore
                .login(loginData.value)
                .then(() => {
                    const { path, queryParams } = parseRedirect()
                    router.push({ path: path, query: queryParams })
                })
                .catch(() => {
                    getCaptcha()
                })
                .finally(() => {
                    loading.value = false
                })
        }
    })
}

/** 解析 redirect 字符串 为 path 和  queryParams */
function parseRedirect(): {
    path: string
    queryParams: Record<string, string>
} {
    const query: LocationQuery = route.query
    const redirect = (query.redirect as string) ?? '/'

    const url = new URL(redirect, window.location.origin)
    const path = url.pathname
    const queryParams: Record<string, string> = {}

    url.searchParams.forEach((value, key) => {
        queryParams[key] = value
    })

    return { path, queryParams }
}

/** 主题切换 */
const toggleTheme = () => {
    const newTheme = settingsStore.theme === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
    settingsStore.changeTheme(newTheme)
}

/** 根据屏幕宽度切换设备模式 */
watchEffect(() => {
    if (height.value < 600) {
        icpVisible.value = false
    } else {
        icpVisible.value = true
    }
})

/** 检查输入大小写 */
function checkCapslock(event: KeyboardEvent) {
    // 防止浏览器密码自动填充时报错
    if (event instanceof KeyboardEvent) {
        isCapslock.value = event.getModifierState('CapsLock')
    }
}

onMounted(() => {
    getCaptcha()
})
</script>

<style lang="scss" scoped></style>
